import React, { Component } from 'react';
import { TradingTypeC } from '@/src/components';
import { Button, Form } from 'antd';

class TradingTypeCTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      t3: undefined,
    };

    setTimeout(() => {
      this.setState({
        t3: '2',
        loading: false,
      });
    }, 2000);
  }

  formRefInstance = React.createRef();

  formRefInstance1 = React.createRef();

  formRefInstance2 = React.createRef();

  formRefInstance3 = React.createRef();

  change = () => {
    this.state.TradingTypeC.setSelect('1');
  };

  render() {
    return (
      <div style={{ width: '800px' }}>
        <div>
          <h2>无初始化值</h2>
          <Form ref={this.formRefInstance}>
            <TradingTypeC form={this.formRefInstance.current} dataIndex={'t1'} onChange={(e) => console.log(e)} />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>同步加载初始化值</h2>
          <Form ref={this.formRefInstance1}>
            <TradingTypeC form={this.formRefInstance1.current} dataIndex={'t2'} initialValue={'2'} onChange={(e) => console.log(e)} />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>异步加载初始化值</h2>
          <Form ref={this.formRefInstance2}>
            <TradingTypeC
              form={this.formRefInstance2.current}
              dataIndex={'t3'}
              disabled={true}
              initialValue={this.state.t3}
              onChange={(e) => console.log(e)}
              loading={this.state.loading}
            />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>点击按钮模拟因业务触发更改</h2>
          <Form ref={this.formRefInstance3}>
            <TradingTypeC
              form={this.formRefInstance3.current}
              dataIndex={'t4'}
              onChange={(e) => console.log(e)}
              onRef={(ref) => {
                this.setState({ TradingTypeC: ref });
              }}
            />
          </Form>
          <Button onClick={this.change}>更改选项 </Button>
        </div>
      </div>
    );
  }
}

export default TradingTypeCTest;
